<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Knowledge of CSS</title>
  <style>
    .pic-1 {
      display: inline-block;
      background: url('img/sprite.png') no-repeat -193px -12px;
      width: 33px;
      height: 29px;
    }

    .pic-2 {
      display: inline-block;
      background: url('img/sprite.png') no-repeat -301px -46px;
      width: 29px;
      height: 14px;
      margin-left: 10px;
    }

    .pic-3 {
      display: inline-block;
      background: url('img/sprite.png') no-repeat -293px -72px;
      width: 19px;
      height: 22px;
      margin-left: 10px;
    }

    /* 字体声明 */
    @font-face {
      font-family: 'icomoon';
      src: url('font/icomoon.eot?kunq2j');
      src: url('font/icomoon.eot?kunq2j#iefix') format('embedded-opentype'),
        url('font/icomoon.ttf?kunq2j') format('truetype'),
        url('font/icomoon.woff?kunq2j') format('woff'),
        url('font/icomoon.svg?kunq2j#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    span {
      font-family: 'icomoon';
      font-size: 30px;
    }

    .inner a {
      font-family: 'icomoon';
    }

    .triangle-1 {
      width: 0;
      height: 0;
      border-top: 100px solid red;
      border-right: 100px solid green;
      border-bottom: 100px solid blue;
      border-left: 100px solid grey;
    }

    .triangle-2 {
      width: 0;
      height: 0;
      /* 兼容性 */
      line-height: 0;
      /* 兼容性 */
      font-size: 0;
      border: 100px solid transparent;
      border-right-color: pink;
    }

    .tri-box {
      position: relative;
      width: 120px;
      height: 100px;
      background-color: paleturquoise;
    }

    .triangle-3 {
      position: absolute;
      right: 15px;
      top: -20px;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-bottom-color: paleturquoise;
    }

    .input-1 {
      outline-color: blue;
    }

    .input-2 {
      outline: none;
    }

    textarea {
      resize: none;
      outline-color: blue;
    }

    .ver {
      /* 垂直居中 */
      vertical-align: middle;
    }

    .c-img {
      border: 2px solid #b2b2b2;
    }

    .c-img img {
      /* 法一(推荐使用): */
      vertical-align: middle;
      /* 法二: */
      /* display: block; */
    }

    .etc-1 {
      width: 290px;
      height: 80px;
      background-color: #eee;
      border: 1px solid #b2b2b2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .etc-2 {
      width: 290px;
      height: 43px;
      background-color: #eee;
      border: 1px solid #b2b2b2;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 限制在一个块元素内显示地文本行数 */
      -webkit-line-clamp: 2;
      /* 设置或检索伸缩盒子对象的子元素的排列方式 */
      -webkit-box-orient: vertical;
    }

    .m-0 li {
      float: left;
      width: 150px;
      height: 200px;
      border: 1px solid #b2b2b2;
      list-style: none;
      margin-left: -1px;
    }

    .m-0 li:hover {
      /* 添加相对定位显示边框 */
      position: relative;
      /* 若盒子预先存在定位, 则提高当前盒子的层级 */
      /* z-index: 1; */
      border: 1px solid blue;
      border-radius: 10px;
    }

    .clearfix:before,
    .clearfix:after {
      content: "";
      display: table;
    }

    .clearfix:after {
      clear: both;
    }

    .clearfix {
      /* IE6,7 */
      *zoom: 1;
    }

    .news {
      position: relative;
      width: 460px;
      border: 1px solid #eee;
    }

    .news img {
      float: left;
    }

    .news p {
      margin: auto;
      line-height: 120px;
    }

    .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .3);
      display: none;
    }

    .news:hover .mask {
      display: block;
    }


    .inner {
      margin: 0;
      padding: 0;
      text-align: center;
    }

    .inner a {
      display: inline-block;
      width: 36px;
      height: 36px;
      background-color: #f7f7f7;
      border: 1px solid #ccc;
      line-height: 36px;
      text-decoration: none;
    }

    .inner .current,
    .inner .elp {
      border: none;
      background-color: #fff;
    }

    .inner input {
      padding: 0;
      vertical-align: top;
      width: 36px;
      height: 36px;
      border: 1px solid #ccc;
      outline: none;
    }

    .inner button {
      padding: 0;
      vertical-align: top;
      width: 60px;
      height: 38px;
      background-color: #f7f7f7;
      border: 1px solid #ccc;
    }

    .triangle-4 {
      width: 0;
      height: 0;
      border-color: transparent red transparent transparent;
      border-style: solid;
      border-width: 22px 8px 0 0;
    }

    .price {
      width: 160px;
      height: 24px;
      border: 1px solid red;
      line-height: 24px;
    }

    .miaosha {
      position: relative;
      float: left;
      width: 90px;
      height: 100%;
      background-color: red;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }

    .miaosha i {
      position: absolute;
      right: 0;
      top: 0;
      width: 0;
      height: 0;
      border-color: transparent #fff transparent transparent;
      border-style: solid;
      border-width: 24px 10px 0 0;
    }

    .origin {
      margin-left: 8px;
      font-size: 13px;
      color: gray;
      text-decoration: line-through;
    }
  </style>

</head>

<body>
  <h3>一. 精灵图</h3>
  <p>CSS Sprites/精灵技术: 为了有效地减少服务器接收和发送请求的次数,提高页面的加载效率</p>
  <p><code>核心原理: 将网页中一些小背景图像(不会经常更换的)整合到一张大图中,一次请求全部拿到</code></p>
  <p><a href="https://www.toptal.com/developers/css/sprite-generator/">精灵图生成</a></p>
  <p><a href="http://www.spritecow.com/">精灵图拾取</a></p>
  <div class="box">
    <div class="pic-1"></div>
    <div class="pic-2"></div>
    <div class="pic-3"></div>
  </div>
  <p>注意的是: 精灵图有很多优点, 但是缺点也很明显.</p>
  <ul>
    <li>图片文件还是比较大的</li>
    <li>图片本身缩放会失真!</li>
    <li>制作完毕后更换麻烦</li>
  </ul>
  <h3>二. 字体图标</h3>
  <p>iconfont本质是矢量的字体, 显示是图像, 可以随意更改大小颜色而不失真 </p>
  <ul>
    <li>灵活, 体量小</li>
    <li>样式简单, 兼容性好. 但复杂的图像建议使用精灵图</li>
  </ul>
  <p><a href="https://icomoon.io/">icomoon 字库</a></p>
  <p><a href="http://www.fontawesome.com.cn/">font-awesome 中文网</a></p>
  <p><a href="https://www.iconfont.cn/">阿里巴巴矢量图标库</a></p>
  <h4>1. 字体图标的引入</h4>
  <p>通过css引入到页面中, 注意文件所在路径</p>
  <p><code>
    @font-face {<br>
    font-family: 'icomoon';<br>
    src: url('fonts/icomoon.eot?m2oiiv');<br>
    src: url('fonts/icomoon.eot?m2oiiv#iefix') format('embedded-opentype'),<br>
    url('fonts/icomoon.ttf?m2oiiv') format('truetype'),<br>
    url('fonts/icomoon.woff?m2oiiv') format('woff'),<br>
    url('fonts/icomoon.svg?m2oiiv#icomoon') format('svg');<br>
    font-weight: normal;<br>
    font-style: normal;<br>
    font-display: block;<br>
    }
  </code></p>
  <h4>2. 使用字体图标</h4>
  <div class="font">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <h4>3. 追加新的字体图标</h4>
  <p>使用 import icons - selection.json 重新选择新的图标下载</p>

  <h3>三. CSS 三角</h3>
  <div class="triangle-1"></div>
  <div class="triangle-2"></div>
  <div class="tri-box">
    <span class="triangle-3"></span>
  </div>

  <h3>四. CSS 用户界面样式</h3>
  <ol>
    <li>更改用户的鼠标样式</li>
    <li>表单轮廓</li>
    <li>防止表单域拖拽</li>
  </ol>
  <h4>1. 鼠标</h4>
  <ul>
    <li style="cursor: default;">default</li>
    <li style="cursor: pointer;">pointer</li>
    <li style="cursor: move;">move</li>
    <li style="cursor: text;">text</li>
    <li style="cursor: not-allowed;">not-allowed</li>
  </ul>
  <h4>2. 激活表单轮廓</h4>
  <input type="text" class="input-1" placeholder="蓝色轮廓">
  <input type="text" class="input-2" placeholder="无轮廓">
  <h4>3. 防止文本域拖拽</h4>
  <textarea name="" id="" cols="30" rows="4" placeholder="请输入评论..."></textarea>
  <h3>五. 垂直对齐属性应用</h3>
  <p>经常用于设置图片或者表单和文字垂直对齐(行内元素或者行内块元素)</p>
  <p>
    <code>
      vetical-align: baseline | top | middle | bottom <br>
      垂直排列: 默认(放在父元素基线上) | 元素顶端与行中最高元素的顶端对齐 | 放在父元素中部 | 最低元素对齐
    </code>
  </p>
  <p><img class="ver" src="img/vertical-align.png" style="height: 150px;" alt="">测试对齐</p>
  <h3>六. 图片底侧空白缝隙解决方案</h3>
  <p>图片默认与基线对齐</p>
  <div class="c-img">
    <img src="img/milogo.png" alt="">
  </div>

  <h3>七. 溢出文字显示省略</h3>
  <h4>1. 单行文本溢出显示省略</h4>
  <ul>
    <li>先强制一行内显示文本</li>
    <p>
      <code>
        white-space: nowrap; (默认是normal自动换行)
      </code>
    </p>
    <li>超出的部分隐藏</li>
    <p>
      <code>
        overflow: hidden;
      </code>
    </p>
    <li>文字用省略号替代超出的部分</li>
    <p>
      <code>
        text-overflow: ellipsis;
      </code>
    </p>
  </ul>
  <div class="etc-1">
    相信我, 此处真的省略了一万字, 不信点开看看
  </div>
  <h4>2. 多行文字溢出显示省略</h4>
  <p>有兼容性问题, 只适合于 webKit 浏览器或移动端; 推荐后端来做这个效果, 设置显示多少个字, 操作更简单</p>
  <p>
    <code>
      overflow: hidden;<br>
      text-overflow: ellipsis;<br>
      /* 弹性伸缩盒子模型显示 */<br>
      display: -webkit-box;<br>
      /* 限制在一个块元素内显示地文本行数 */<br>
      -webkit-line-clamp: 2;<br>
      /* 设置或检索伸缩盒子对象的子元素的排列方式 */<br>
      -webkit-box-orient: vertical;
    </code>
  </p>
  <div class="etc-2">
    相信我, 此处真的省略了一万字, 不信点开看看; 相信我, 此处真的省略了一万字, 不信点开看看
  </div>

  <h3>八. 常用布局技巧</h3>
  <h4>1. margin 负值的巧用</h4>
  <ul class="m-0 clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <h4>2. 文字围绕浮动元素</h4>
  <div class="news clearfix">
    <img class="n-img" src="img/wings.png" style="width: 200px; height: 120px;" alt="">
    <p>【集锦】 Ti6 中国队 Wings 夺冠!</p>
    <div class="mask"></div>
  </div>
  <h4>3. 行内块的巧用</h4>
  <div class="inner">
    <a href="#" class="prev"></a>
    <a href="#">...</a>
    <a href="#" class="current">16</a>
    <a href="#">17</a>
    <a href="#">18</a>
    <a href="#" class="elp">...</a>
    <a href="#" class="next"></a>
    到第
    <input type="text">
    页
    <button>确认</button>
  </div>
  <h4>4. CSS 三角强化</h4>
  <div class="triangle-4"></div>
  <br>
  <div class="price">
    <span class="miaosha">
      ¥1680.0
      <i></i>
    </span>
    <span class="origin">¥3680.0</span>
  </div>

  <h3>九. CSS reset</h3>
  <p>由于不同内核对标签的默认渲染不同, 为了消除差异, 照顾兼容性, 则需要对 CSS 进行初始化</p>
  <p>
    参考京东
  </p>
  <p>
    <code>
* {<br>
/* 重置内外边距 */<br>
margin: 0;<br>
padding: 0<br>
}<br>

em,i {<br>
/* 取消斜体 */<br>
font-style: normal<br>
}<br>

li {<br>
/* 清除小圆点 */<br>
list-style: none<br>
}<br>

img {<br>
/* 兼容性: 解决低版本浏览器链接含有图片时有边框的问题 */<br>
border: 0;<br>
/* 清除图片底侧的空白缝隙 */<br>
vertical-align: middle<br>
}<br>

button {<br>
cursor: pointer<br>
}<br>

a {<br>
color: #666;<br>
text-decoration: none<br>
}<br>

a:hover {<br>
/* 品牌色: 这里是京东红 */<br>
color: #c81623<br>
}<br>

button,input {<br>
/* 中文'宋体' 乱码问题, 直接使用 unicode编码 "\5B8B\4F53" */<br>
font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif<br>
}<br>
<br>
body {<br>
/* CSS3属性: 文字缩放的锯齿问题 */<br>
-webkit-font-smoothing: antialiased;<br>
background-color: #fff;<br>
font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;<br>
color: #666<br>
}<br>
<br>
/* 隐藏样式 */<br>
.hide,.none {<br>
display: none<br>
}<br>
<br>
/* 单伪元素清除浮动 */<br>
.clearfix:after {<br>
visibility: hidden;<br>
clear: both;<br>
display: block;<br>
content: ".";<br>
height: 0<br>
}<br>
<br>
/* 兼容ie */<br>
.clearfix {<br>
*zoom: 1<br>
}<br>
    </code>
  </p>
</body>

</html>